<template>
    <div class="login">

      <el-form ref="form" :model="form" :rules="rules">
        <h2>Vue Admin Panel</h2>
        <el-form-item prop="email">
          <el-input v-model="form.email" placeholder="邮箱" ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="密码" ></el-input>
        </el-form-item>
        <el-button type="primary" style="width: 100%" @click="login">登陆</el-button>
      </el-form>
    </div>
</template>

<script>
  export default {
    name: "Login",
    data:function(){
      return {
        form:{
          email:'rau.jayde@example.org',
          password:'password',
        },
        rules:{
          email:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type:'email', message: '请输入合法email', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      login(){
        this.$refs.form.validate(valid =>{
          if (valid){
            //success
            this.axios.post('/api/auth/login',this.form).then(res=>{
              //tips:只有响应的状态码是200 才会进到这个回调里
              //其它400+，500+都会响应在catch里
              localStorage.setItem('token',`${res.data.data.token_type} ${res.data.data.access_token}`);
              this.$message({
                message: '登陆成功',
                type: 'success'
              });
              this.$router.push('/admin')
            }).catch(err=>{
              this.$message.error(err.response.data.message);
            })

          }
          else{
            //failed
            this.$message.error("请正确填写用户名和密码");
          }
        })
      }
    },

  }
</script>

<style scoped lang="less">
.login{
  width: 100%;
  height: 100%;
  background-color:#2f4050 ;
  .el-form{
    width: 400px;
    padding: 20px;
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px;
  }
  h2{
    text-align: center;
    margin-top: 10px;
  }
}
</style>
